<!--
 * @Author: Vi卡农
 * @Date: 2020-03-06 18:33:51
 * @LastEditTime: 2020-03-20 17:16:29
 * @Description: -商机中心-我的房源资源-
 * @FilePath: \cshf_admin\src\views\modules\resource\selfresourcehouse.vue
 -->
<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-resource__resourcehouseimport}">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-input v-model="dataForm.id" placeholder="id" style="width:100px" clearable></el-input>
        </el-form-item>
        <el-form-item>
          楼盘名：
          <el-input v-model="dataForm.dictName" placeholder="楼盘名" class="Section_inp" clearable></el-input>
        </el-form-item>
        <el-form-item>
          座栋：
          <el-input v-model="dataForm.zdName" placeholder="座栋" class="Section_inp" clearable></el-input>
        </el-form-item>
        <el-form-item>
          单元：
          <el-input v-model="dataForm.dyName" placeholder="单元" class="Section_inp" clearable></el-input>
        </el-form-item>
        <el-form-item>
          房号：
          <el-input v-model="dataForm.num" placeholder="房号" class="Section_inp" clearable></el-input>
        </el-form-item>
        <el-form-item>
          业主电话：
          <el-input v-model="dataForm.ownerPhone1" placeholder="业主电话" style="width:120px" clearable></el-input>
        </el-form-item>
        <el-form-item>
          跟进日期：
          <el-date-picker
            v-model="dataForm.followTimes"
            type="date"
            placeholder="开始时间"
            value-format="yyyy-MM-dd"
            style="width:136px"
          ></el-date-picker>
          {{' -'}}
          <el-date-picker
            v-model="dataForm.followTimee"
            type="date"
            placeholder="结束时间"
            value-format="yyyy-MM-dd"
            style="width:136px"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
        </el-form-item>

        <el-form-item v-if="dataListSelections.length>0&&dataListSelections.length<2">
          <el-dropdown>
            <el-button type="primary">
              转入-租
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item style="width:80px" @click.native="addSelectChange('1')">写字楼</el-dropdown-item>
              <el-dropdown-item style="width:80px" @click.native="addSelectChange('3')">住宅</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown style="margin-left:10px">
            <el-button type="primary">
              转入-买
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item style="width:80px" @click.native="addSelectChange('2')">写字楼</el-dropdown-item>
              <el-dropdown-item style="width:80px" @click.native="addSelectChange('4')">住宅</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        @selection-change="dataListSelectionChangeHandle"
        @row-click="getPageFollow"
        style="width: 100%;"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <div class="houseinfoFollow">
              <el-card class="box-card FY_details" shadow="hover">
                <el-row>
                  <el-col :span="24">
                    <el-table :data="FollowTableData" class="FY_table_gj" max-height="150">
                      <el-table-column prop="content" label="跟进内容"></el-table-column>
                      <el-table-column prop="creatorName" label="跟进人" width="120"></el-table-column>
                      <el-table-column prop="deptName" label="跟进部门" width="120"></el-table-column>
                      <el-table-column prop="createDate" label="跟进时间" width="150"></el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
              </el-card>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="id" label="ID" header-align="center" align="center"></el-table-column>
        <el-table-column prop="dictName" label="楼盘名" header-align="center" align="center"></el-table-column>
        <el-table-column prop="zdName" label="座栋名" header-align="center" align="center"></el-table-column>
        <el-table-column prop="dyName" label="单元名" header-align="center" align="center"></el-table-column>
        <el-table-column prop="num" label="房号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="area" label="面积" header-align="center" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.area+' ㎡'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ownerName" label="业主姓名" header-align="center" align="center"></el-table-column>
        <el-table-column prop="ownerPhone1" label="业主电话1" header-align="center" align="center"></el-table-column>
        <el-table-column prop="createDate" label="创建时间" header-align="center" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.createDate?scope.row.createDate.substring(0,10):scope.row.createDate}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="followTime" label="跟进日期" header-align="center" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.followTime?scope.row.followTime.substring(0,10):scope.row.followTime}}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('handle')"
          fixed="right"
          header-align="center"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
              v-if="$hasPermission('resource:resourcehouseimport:update')"
              type="text"
              size="small"
              @click="addOrUpdateHandle(scope.row.id)"
            >{{ $t('update') }}</el-button>
            <el-button type="text" size="small" @click="addFollowFun(scope.row)">跟进</el-button>
          </template>
        </el-table-column>
      </el-table>
  <div class="paginationBox">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle"
        ></el-pagination>
      </div>
      <!-- <div class="ZWbox2"></div>
      <div class="paginationBox2" :style="'width:'+autoWidthVal">
        <el-card class="box-card martop15 FY_details" shadow="hover">
          <el-table :data="FollowTableData" class="FY_table_gj" height="175">
            <el-table-column prop="content" label="跟进内容"></el-table-column>
            <el-table-column prop="creatorName" label="跟进人" width="120"></el-table-column>
            <el-table-column prop="deptName" label="跟进部门" width="120"></el-table-column>
            <el-table-column prop="createDate" label="跟进时间" width="150"></el-table-column>
          </el-table>
        </el-card>
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle"
        ></el-pagination>
      </div> -->
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

      <el-dialog title="写跟进" :visible.sync="addFollowVisible" width="30%">
        <el-form ref="form" :model="FollowForm" label-width="50px" label-position="top">
          <el-form-item label="跟进方式">
            <ren-select v-model="FollowForm.type" dict-type="followType"></ren-select>
          </el-form-item>
          <el-form-item label="跟进内容">
            <el-input v-model="FollowForm.content" type="textarea" :rows="4"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="addFollowVisible = false">取 消</el-button>
          <el-button type="primary" @click="FollowFun" :loading="BtnLoading">添加</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 弹窗, 转入 -->
    <component
      v-if="addOruUpdate"
      :is="zjName"
      @CloseDialog="CloseDialogFun"
      :houseinto="houseintoObj"
      @deleteResources="deleteResources_"
    ></component>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./resourcehouseimport-add-or-update";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/resource/resourcehouseimport/selfPage",
        getDataListIsPage: true
      },
      dataForm: {
        id: "",
        dictName: "",
        zdName: "",
        dyName: "",
        num: "",
        ownerPhone1: "",
        followTimes: "",
        followTimee: ""
      },
      uploadVisible: false,
      autoWidthVal: "",
      FollowTableData: [],
      addFollowVisible: false,
      FollowForm: {
        content: "",
        type: "",
        impId: ""
      },
      BtnLoading: false,
      addOruUpdate: false,
      addUrl: "",
      houseintoObj: {}
    };
  },
  components: {
    AddOrUpdate
  },
  computed: {
    zjName: {
      get: function() {
        this.addUrl;
        var myComponent = () => import(`../house/page/${this.addUrl}`);
        return myComponent;
      }
    }
  },
  created() {
    this.autoWidth();
  },
  mounted() {
    let _this = this;
    window.onresize = function() {
      _this.autoWidth();
    };
  },
  methods: {
    autoWidth() {
      let w = document.documentElement.scrollWidth || document.body.scrollWidth;
      this.autoWidthVal = w - 270 + "px";
    },
    //获取房源跟进记录
    getPageFollow(row) {
      let _this = this;
      this.$http
        .get(`/resource/resourcehouseimport/pageFollow`, {
          params: {
            page: 1,
            limit: 50,
            impId: row.id
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.FollowTableData = res.data.list;
        })
        .catch(() => {});
    },
    //写跟进
    addFollowFun(row) {
      this.FollowForm = {
        content: "",
        type: "",
        impId: row.id
      };
      this.addFollowVisible = true;
    },
    //确定添加跟进
    FollowFun() {
      let _this = this;
      this.$http
        .post("/resource/resourcehouseimport/saveFollow", this.FollowForm)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message.success("添加跟进成功！");
          _this.addFollowVisible = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "添加失败"
          });
        });
    },
    //点击转入
    addSelectChange(val) {
      this.addOruUpdate = true;
      if (val == "6") {
        //商买
        // this.addUrl = "./page/customermsinfo-add-or-update";
      } else if (val == "2") {
        //写买
        this.addUrl = "houseXM-add";
      } else if (val == "4") {
        //住买
        this.addUrl = "houseZM-add";
      } else if (val == "5") {
        //商租
        // this.addUrl = "./page/customerzsinfo-add-or-update";
      } else if (val == "1") {
        //写租
        this.addUrl = "houseXZ-add";
      } else if (val == "3") {
        //住租
        this.addUrl = "houseZZ-add";
      }
      this.houseintoObj = this.dataListSelections[0];
    },
    CloseDialogFun() {
      this.addOruUpdate = false;
    },
    //删除资源
    deleteResources_() {
      let _this = this;
      this.$http
        .post(
          "/resource/resourcehouseimport/delete",
          {},
          {
            params: {
              id: this.dataListSelections[0].id
            }
          }
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message.success("转入成功");
          this.getDataList();
        })
        .catch(() => {});
    }
  }
};
</script>